<template>
  <div class="container">
    <div class="box box1">
      <div class="item">
        <div class="left">
          <div class="one">本日检测（批次）</div>
          <div v-if="data.brjcl" class="two">检测量 {{ data.brjcl }}</div>
          <div v-if="data.bryxs" class="two">阳性量 {{ data.bryxs }}</div>
        </div>
        <div class="right">
          <div id="four1"></div>
        </div>
      </div>
      <div class="item middle">
        <div class="left">
          <div class="one">本年检测（批次）</div>
          <div v-if="data.bnjcl" class="two">本年检测 {{ data.bnjcl }}</div>
          <div v-if="data.bnhgs" class="two">合格数 {{ data.bnhgs }}</div>
        </div>
        <div class="right">
          <div id="four2"></div>
        </div>
      </div>
      <div class="item">
        <div class="left">
          <div class="one">本年阳性处理（批次）</div>
          <div v-if="data.bnyxzs" class="two">
            疑似阳性总数 {{ data.bnyxzs }}
          </div>
          <div v-if="data.bnycls" class="two">已处理数 {{ data.bnycls }}</div>
        </div>
        <div class="right">
          <div id="four3"></div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="item">
        <div class="left">
          <div class="one">商户覆盖率</div>
          <div v-if="data.peopleSum" class="two">
            总商户数 {{ data.peopleSum }}
          </div>
          <div v-if="data.fugaiSUm" class="two">
            已覆盖数 {{ data.fugaiSUm }}
          </div>
        </div>
        <div class="right">
          <div id="four4"></div>
        </div>
      </div>
      <div class="item middle">
        <div class="left">
          <div class="one">单日交易</div>
          <div class="two">交易笔数 {{ data.drjyBSum }}笔</div>
          <div class="two">交易数量 {{ data.drjySum }}</div>
        </div>
        <div class="right five">
          <span>{{ data.drjye }}万元</span>
          <span>交易金额</span>
        </div>
      </div>
      <div class="item middle bottom">
        <div class="left">
          <div class="one">总交易量</div>
          <div class="two">交易笔数 {{ data.alljyBSum }}笔</div>
          <div class="two">交易总额 {{ data.alljye }}万元</div>
        </div>
        <div class="right five">
          <span>{{ data.alljySum }}kg</span>
          <span>交易数量</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref } from "vue";
import { getJCXMFX, getSYTJByMarketATy } from "../../apis/home";
const data = ref({});
const option1 = ref();
const option2 = ref();
const option3 = ref();
const option4 = ref();
const getInit = async () => {
  await getSYTJByMarketATy().then((res) => {
    console.log(res);
    data.value = res.data[0];
    const rate1 = (data.value.brhgl * 100) / 100;
    const rate2 = (data.value.bnhgl * 100) / 100;
    const rate3 = (data.value.bnclv * 100) / 100;
    const rate4 = Math.round(data.value.fugailv * 100) / 100;
    option1.value = {
      title: {
        text: rate1 + "%",
        x: "center",
        y: "35%",
        textStyle: {
          fontWeight: "normal",
          color: "#fff",
          fontSize: "16",
        },
        itemGap: 5,
        subtext: "合格率",
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      polar: {
        center: ["center", "center"],
        radius: ["75%", "95%"],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: [data.value.brhgl],
          name: "",
          type: "bar",
          roundCap: true,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(19, 84, 146, .4)",
          },
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#005DCF",
                },
                {
                  offset: 1,
                  color: "#1AED83",
                },
              ]),
            },
          },
        },
      ],
    };
    option2.value = {
      title: {
        text: rate2 + "%",
        x: "center",
        y: "35%",
        textStyle: {
          fontWeight: "normal",
          color: "#fff",
          fontSize: "16",
        },
        itemGap: 5,
        subtext: "合格率",
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      polar: {
        center: ["center", "center"],
        radius: ["75%", "95%"],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: [data.value.bnhgl * 1],
          name: "",
          type: "bar",
          roundCap: true,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(19, 84, 146, .4)",
          },
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#005DCF",
                },
                {
                  offset: 1,
                  color: "#1AED83",
                },
              ]),
            },
          },
        },
      ],
    };
    option3.value = {
      title: {
        text: rate3 + "%",
        x: "center",
        y: "35%",
        textStyle: {
          fontWeight: "normal",
          color: "#fff",
          fontSize: "16",
        },
        itemGap: 5,
        subtext: "处理率",
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      polar: {
        center: ["center", "center"],
        radius: ["75%", "95%"],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: [data.value.bnclv * 1],
          name: "",
          type: "bar",
          roundCap: true,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(19, 84, 146, .4)",
          },
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#005DCF",
                },
                {
                  offset: 1,
                  color: "#1AED83",
                },
              ]),
            },
          },
        },
      ],
    };
    option4.value = {
      title: {
        text: rate4 + "%",
        x: "center",
        y: "35%",
        textStyle: {
          fontWeight: "normal",
          color: "#fff",
          fontSize: "16",
        },
        itemGap: 5,
        subtext: "覆盖率",
        subtextStyle: {
          color: "#fff",
          fontSize: 14,
        },
      },
      polar: {
        center: ["center", "center"],
        radius: ["75%", "95%"],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: [data.value.fugailv],
          name: "",
          type: "bar",
          roundCap: true,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(19, 84, 146, .4)",
          },
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#005DCF",
                },
                {
                  offset: 1,
                  color: "#1AED83",
                },
              ]),
            },
          },
        },
      ],
    };
  });
  var myChart = echarts.init(document.getElementById("four1"), null, {
    devicePixelRatio: 2.5,
  });
  var myChart2 = echarts.init(document.getElementById("four2"), null, {
    devicePixelRatio: 2.5,
  });
  var myChart3 = echarts.init(document.getElementById("four3"), null, {
    devicePixelRatio: 2.5,
  });
  var myChart4 = echarts.init(document.getElementById("four4"), null, {
    devicePixelRatio: 2.5,
  });
  myChart.setOption(option1.value);
  myChart2.setOption(option2.value);
  myChart3.setOption(option3.value);
  myChart4.setOption(option4.value);
};
getInit();
</script>

<style scoped lang="scss">
.container {
  height: 100%;

  .box {
    height: 50%;
    display: flex;

    .item {
      height: 100%;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .left {
        padding: 0 10px;
        font-size: 13px;
        // font-size: 0.75vw;
        width: 75%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .one {
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #1eeeff;
        }

        .two {
          color: #fff;
        }
      }

      .right {
        width: 70%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        // position: relative;

        div {
          width: 100%;
          height: 100%;
          // position: absolute;
          // right: 10%;
          // top: 50%;

          .name {
            position: absolute;
            top: 20%;
            left: 9%;
            color: #fff;
            width: 100%;
            font-size: 13px;
          }
        }
      }
    }
  }

  .five {
    font-size: 14px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url("../../assets/img/组\ 6540@2x.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 85%;
  }

  .box1 {
    border-bottom: 1px dashed #385bed;
  }

  .middle {
    border-right: 1px dashed #385bed;
    border-left: 1px dashed #385bed;
  }

  .bottom {
    border: none;
  }
}
</style>
